﻿{% extends 'base.html' %}

{% block body %}
    <div id="parallax"><!-- Parallax Area -->
        <!-- Banner Area -->
        <section class="banner_area ba_2">
            <img src="../static/images/parallax-layer/banner-bg.png" alt="" class="layer banner_bg" data-depth="0.35">
            <img src="../static/images/parallax-layer/banner-layer-1.png" alt="" class="layer layer_1"
                 data-depth="0.60">
            <img src="../static/images/parallax-layer/banner-layer-2.png" alt="" class="layer layer_2"
                 data-depth="0.55">
            <div class="container">
                <h2 class="wow fadeInUp">癌症数据可视化分析 </h2>
                <p class="wow fadeInUp" data-wow-delay="0.3s">癌症是一组可影响身体任何部位的多种疾病的通称。作为是全世界的一个主要死因，2020年近1000万例（或近六分之一）死亡由癌症导致。</p>
                <a href={{ url_for('today') }} class="theme_btn wow fadeInUp" data-wow-delay="0.5s" style="border-radius: 25px">开始</a>
                <img src="../static/images/top-banner-bg-1.png" alt="" class="banner_img">
            </div>
        </section>
        <!-- End Banner Area -->
        <!-- Our Services Area -->
        <section class="services_area sa_2">
            <img src="../static/images/parallax-layer/services_area-bg.png" alt="" class="layer layer_1"
                 data-depth="0.20">
            <div class="container">
                <h2>简介</h2>
                <div class="services_row row">
                    <!-- Services items -->
                    <div class="col-lg-6 wow fadeInUp">
                        <div class="services_items media">
                            <div class="services_icons"><i class="flaticon-tick"></i></div>
                            <div class="media-body">
                                <a href={{ url_for('today') }}>今日概况</a>
                                <p>呈现185个国家在2020年按性别和年龄组对36种癌症的发病率、死亡率的数据可视化分析。 </p>
                            </div>
                        </div>
                    </div>
                    <!-- Services items -->
                    <div class="col-lg-6 wow fadeInUp">
                        <div class="services_items media">
                            <div class="services_icons si_2"><i class="flaticon-tick"></i></div>
                            <div class="media-body">
                                <a href={{ url_for('overtime') }}>过往调查</a>
                                <p>根据60个国家的高质量数据，呈现半个多世纪以来癌症发病率和死亡率的时间趋势。</p>
                            </div>
                        </div>
                    </div>
                    <!-- Services items -->
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services_items media">
                            <div class="services_icons si_3"><i class="flaticon-tick"></i></div>
                            <div class="media-body">
                                <a href={{ url_for('future') }}>未来分析</a>
                                <p>根据现有数据，预测到2040年，全世界未来的癌症发病率和死亡率负担。</p>
                            </div>
                        </div>
                    </div>
                    <!-- Services items -->
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services_items media">
                            <div class="services_icons si_4"><i class="flaticon-tick"></i></div>
                            <div class="media-body">
                                <a href={{ url_for('causes') }}>病因追查</a>
                                <p>根据数据分析形成癌症的主要诱因，并在此基础上做出一定预防建议。 </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Our Services Area -->

    </div>
    <!-- End Parallax -->

{% endblock %}
